@import '~@/common/common.styl';
.vipPay_box{
  position relative
  .pay_type{
    li{
      display flex
      justify-content space-between
      padding rem(30) 0
      align-items center
      border-bottom 1px solid #e5e5e5
      font-size rem(30)
      &:last-child{
        border none
      }
      .ml_left{
        display flex
        align-items center
        span{
          color #222222;
        }
      }
      .ml_right{
        display flex
        align-items center
        .checked_icon{
          display inline-block
          width rem(30)
          height rem(30)
          border 1px solid #e5e5e5
          border-radius rem(30)
        }
      }
      .ml_icon{
        display inline-block
        vertical-align middle
        margin-right rem(14)
        &.weixin{
          width rem(50)
          height rem(50)
          bgp('~@/assets/img/weixin.png')
        }
        &.zfb{
          width rem(50)
          height rem(50)
          bgp('~@/assets/img/zfb.png')
        }
      }
      &.active{
        .ml_right{
          .checked_icon{
            bgp('~@/assets/img/checked_y.png')
            background-color #ff7500
            border-color #ff7500
          }
        }
      }
    }
  }
  .more_list{
    margin-top rem(10)
    li{
      border-bottom 1px solid #e5e5e5
      font-size rem(30)
      a{
        display block
      }
      .li_box{
        display flex
        justify-content space-between
        padding rem(50) 0
        align-items center
      }
      &:last-child{
        border none
      }
      .ml_left{
        span{
          color #222222;
        }
      }
      .ml_right{
        span{
          color #555555;
        }
      }
      .ml_icon{
        display inline-block
        vertical-align middle
        margin-right rem(14)
        &.contact{
          width rem(34)
          height rem(36)
          bgp('~@/assets/img/contact.png')
        }
        &.jurisdiction{
          width rem(36)
          height rem(31)
          bgp('~@/assets/img/jurisdiction.png')
        }
      }
      span{
        display inline-block
        vertical-align middle
      }
      .arrow{
        display inline-block
        width rem(13)
        height rem(23)
        margin-left rem(20)
        bgp('~@/assets/img/more.png')
        vertical-align middle
      }
    }
  }
  .pay_btn{
    height: rem(88)
    line-height rem(88)
    font-size rem(30)
    margin-top rem(20)
    text-align center
    border-radius: rem(10);
    color #fff
    background-color: #ff7500;
    &.disabled{
      color #888;
      background-color: #efefef;
    }
    &.wxPayBtn{
      margin-top rem(43)
    }
  }
  .vip_endtime{
    margin-top rem(26)
    font-size rem(24)
    text-align right
    color #888
  }
  .vipPay_main{
    position relative
    padding rem(90) rem(30) 0
    background-color #fff;
    .vip_month_box{
      display flex
      justify-content space-between
      min-height rem(230)
      &.two_m{
        justify-content space-around
      }
      .vip_month_item{
        position relative
        width rem(220)
        // height rem(267)
        border-radius: rem(10);
        text-align center
        border: solid 2px #efefef;
        box-sizing border-box
        padding rem(48) rem(10) 0
        font-size: 0
        &.active{
          border-color #ff7500
          background-color #fffbf8
          .vmb_month{
            color #ff7500
          }
          .vmb_price{
           color #ff8b44
          }
          .give_month{
            color #fd7f2c
            border-color rgba(253,146,84,.48)
          }
        }
        &.disabled{
          cursor: no-drop
          background-color: #fff
          border-color #efefef
          .vmb_month{
            color #b5b5b5
          }
          .vmb_price{
           color #b5b5b5
          }
          .vmb_original_price{
           color #b5b5b5
          }
          .vmb_day_price{
           color #b5b5b5
          }
          .give_month{
            color #b5b5b5
            border-color #efefef
          }
          .discounts_icon{
            background-color: #efefef;
          }
        }
      }
      .vmb_month{
        font-size rem(26)
        font-weight bold
        color #222
      }
      .vmb_price{
        margin-top rem(12)
        font-size rem(24)
        color #222
        font-weight bold
        strong{
          font-size rem(38)
        }
      }
      .vmb_original_price{
        margin-top rem(14)
        font-size rem(26)
        color #888
        text-decoration line-through
      }
      .vmb_day_price{
        margin-top rem(14)
        font-size rem(26)
        color #888
      }
      .give_month{
        margin-top rem(10)
        font-size rem(24)
        line-height rem(62)
        text-align center
        color #222
        border-top 2px dashed #efefef
      }
      .discounts_icon{
        position absolute
        top rem(-20)
        right -2px
        display inline-block
        height: rem(40);
        line-height rem(40)
        padding 0 rem(16)
        font-style normal
        text-align center
        color #fff
        font-size rem(24)
        background-color: #ff7500;
        border-radius: 0px rem(10) 0px rem(10); 
      }
    }
    .gift_content{
      position: relative
      padding: rem(54) rem(20) rem(22)
      margin-top: rem(20)
      border: dashed 2px #efefef
      border-radius: rem(10)
      background-color: #fffbf8
      .gc_item{
        font-size: rem(26)
        line-height: rem(36)
        color: #555555
        span{
          color: #fd7f2c
        }
      }
      .gc_annotation{
        font-size: rem(22)
        line-height: rem(32)
        margin-top: 2px
        color:#888
      }
      .gc_title{
        position absolute
        top -2px
        left -2px
        display inline-block
        height: rem(40);
        line-height rem(40)
        padding 0 rem(16)
        font-style normal
        text-align center
        color #fff
        font-size rem(24)
        background-color: #ff7500;
        border-radius:rem(10) 0px rem(10) 0px; 
      }
    }
    .coupon_box{
      display flex
      justify-content space-between
      padding rem(30) 0
      align-items center
      border-bottom 1px solid #e5e5e5
      font-size rem(30)
      &:last-child{
        border none
      }
      .ml_left{
        display flex
        align-items center
        padding-left: rem(4)
        span{
          color #222222;
        }
      }
      .ml_icon{
        display inline-block
        vertical-align middle
        margin-right rem(14)
        width: rem(42)
        height: rem(48)
        bgp('~@/assets/img/cardbag_ticket.png')
      }
      .ml_right{
        display flex
        align-items center
        padding-right: rem(6)
        
        &:after{
          content: ''
          display inline-block
          box-sizing: border-box
          width rem(19)
          height rem(19)
          border 1px solid #b5b5b5
          transform-origin: center center
          transform: rotate(45deg) translateY(2px)
          border-left: none
          border-bottom: none
          margin-left: rem(20)
        }
        p{
          color: #888
          span{
            color: #fd7f2d
            font-size: rem(30)
          }
        }
      }
    }
  }
  .vipPay_menu{
    display flex
    justify-content space-between
    box-sizing border-box
    padding 0 rem(30)
    margin-bottom rem(-18)
    li{
      position relative
      width rem(165)
      height rem(160)
      border-radius rem(10)
      box-sizing: border-box
      overflow hidden
      .bg_mask{
        display block
        position absolute
        width 100%
        height 100%
      }
      .vm_text{
        position relative
        height 100%
        padding-top rem(53)
        box-sizing border-box
        text-align center        
      }
      .vip_icon{
        display block
        width rem(41)
        height rem(31)
        margin 0 auto
      }
      strong{
        display block
        margin-top rem(10)
        font-size rem(28)
      }
      .vip_v{
        position: absolute
        right: 0
        top: 0
        display: inline-block
        height: rem(30)
        line-height: rem(30)
        font-size: rem(18)
        padding: 0 rem(10)
        text-align: center
        color: #fff
        border-radius: 0px rem(10) 0px rem(10);
        box-sizing: border-box
        z-index 1
      }
      &.vip_level3{
        background-image: linear-gradient(-39deg, #ffe19d 1%, #fff3e2 100%), linear-gradient(#ff0000,#ff0000);
        .bg_mask{
          bgp('./../../assets/img/v_bg_3.png')
        }
        .vip_icon{
          bgp('./../../assets/three/vip3.png')
        }
        strong{
          color #9a6a25
        }
      }
      &.vip_level4{
        background-image: linear-gradient(-39deg, #ffd8c2 1%, #fff4ee 100%), linear-gradient(#ff0000, #ff0000);
        .bg_mask{
          bgp('./../../assets/img/v_bg_4.png')
        }        
        .vip_icon{
          bgp('./../../assets/three/vip4.png')
        }
        strong{
          color #af7153
        }
        .vip_v{
          background-color: #af7153
        }
      }
      &.vip_level5{
        // background-image: linear-gradient(-39deg, #ffd8c2 1%, #fff4ee 100%), linear-gradient(#ff0000, #ff0000);
        // .bg_mask{
        //   bgp('./../../assets/img/v_bg_4.png')
        // }
        position: relative
        overflow: initial
        padding: rem(8)
        border-radius 0 rem(10) rem(10) rem(10)
        background-image: linear-gradient(-39deg, 
          #ffd8b4 0%, 
          #ffe5cd 100%), linear-gradient( #ffe6cd, #ffe6cd);
        .level5_box{
          width: 100%
          height: 100%
          box-shadow: inset 0px 0px 20px 0px rgba(156, 81, 4, 0.3);
          background-image: linear-gradient(-30deg, 
            #ff8900 0%, 
            #ffac4c 50%, 
            #ffce99 100%), 
          linear-gradient(
            #3c3c3c, 
            #3c3c3c);
          background-blend-mode: normal,  normal;
          border-radius: rem(10)
        }
        .vip_icon{
          bgp('./../../assets/three/vip1.png')
        }
        strong{
          color #9c5104
        }
        .vip_v{
          background-color: #9c5104;
        }
        .vm_text{
          padding-top: rem(45)
        }
        .level_sale{
          position: absolute
          top: rem(-26)
          left: 0
          display: inline-block
          // height: rem(26)
          padding: rem(4) rem(8) 0
          font-size: rem(18)
          color: #92551d
          background-color: #ffe5ce
          border-radius: rem(10) rem(10) 0 0
        }
      }
      &.vip_level1{
        background-image: linear-gradient(-39deg, #c2cbe2 0%, #f8f9ff 100%), linear-gradient(#ff0000,#ff0000);
        .bg_mask{
          bgp('./../../assets/img/v_bg_1.png')
        } 
        .vip_icon{
          bgp('./../../assets/three/vip1.png')
        }
        strong{
          color #707ea1
        }
        .vip_v{
          background-color: #707fa1
        }
      }
      &.vip_level2{
        background-image: linear-gradient(-39deg, #ffcb9e 1%, #ffedde 100%), linear-gradient( #ff0000,#ff0000);
        .bg_mask{
          bgp('./../../assets/img/v_bg_2.png')
        }
        .vip_icon{
          bgp('./../../assets/three/vip2.png')
        }
        strong{
          color #c47e46
        }
        .vip_v{
          background-color: #c47e46
        }
      }
      &.active{
        z-index 1
        span{
          display block
        }
      }
    }
  }
  .function_box{
    display: flex
    justify-content: space-between
    span{
      display: inline-block
      font-size rem(26)
      line-height: rem(100)
      color #fd7f2c
    }
  }
}
// 温馨提示弹框
.up_dialog{
  top: 48% !important;
  background-color: #fd7f2c !important;
  width: rem(665) !important
  padding: rem(44) rem(30) rem(20) !important
  border-radius: rem(18) !important
  box-sizing: border-box !important
  overflow: initial !important
  &:before{
    position: absolute
    right: rem(50)
    top: rem(-50)
    content: ''
    display: inline-block
    width: rem(238)
    height: rem(236)
    bgp('~@/assets/img/up_box_icon.png');
  }
}
.up_dialog_content{
  box-sizing: border-box
  height: rem(443)
  padding: rem(80) rem(40)
  bgp('~@/assets/img/up_box_bg.png');
  h5{
    font-size: rem(40)
    color: #333
  }
}
.up_dialog_msg{
  margin-top: rem(34)
  p{
   font-size: rem(28) 
   color: #666
   strong{
     font-weight: normal
     color: #fd7f2c
     line-height: rem(50)
   }
  }
}
.up_dialog_btns{
  display: flex
  justify-content: space-between
  font-size: 0
  margin-top: rem(52)
  button{
    border:1px solid #fd7f2c;
    background-color: #fff
    width: rem(243)
    height: rem(85)
    border-radius: rem(10)
    font-size: rem(30)
    color: #fd7f2c
    &.active{
      background-color: #fd7f2c
      border-color: #fd7f2c
      color: #fff
    }
  }
}
.up_annotation{
  font-size: rem(22)
  color:#fff
  text-align: center
  margin-top: rem(20)
}